﻿<!doctype html>
<html class="no-js" lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>商品详情</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
		
		<!-- Google Fonts
		============================================ -->		
       <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
       <link href='https://fonts.googleapis.com/css?family=Niconne' rel='stylesheet' type='text/css'>
        
        <!-- style CSS
        ============================================ -->
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <link rel="stylesheet" href="lib/custom-slider/css/nivo-slider.css"/>
        <link rel="stylesheet" href="lib/custom-slider/css/preview.css"/>
        <link rel="stylesheet" href="css/font-awesome.min.css"/>
        <link rel="stylesheet" href="css/owl.carousel.css"/>
        <link rel="stylesheet" href="css/jquery-ui.css"/>
        <link rel="stylesheet" href="css/meanmenu.min.css"/>
        <link rel="stylesheet" href="css/animate.css"/>
        <link rel="stylesheet" href="css/style.css"/>
        <link rel="stylesheet" href="css/responsive.css"/>
        
		<!-- modernizr JS
		============================================ -->		
        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    </head>
    <body>
        <!-- header start -->
        <header class="header-area">
            <!--<header class="header-area">-->
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-2">
                        <div class="header-logo">
                            <a href="user_index.html"><img src="img/logo/header-logo.png" alt="Jhilmil"></a>
                        </div>
                    </div>
                    <div class="col-md-10">
                        <div class="row">
                            <div class="col-lg-5 col-md-4 col-sm-3 hidden-xs">
                                <div class="top-left">

                                </div>
                            </div>
                            <div class="col-lg-7 col-md-8 col-sm-9">
                                <div class="top-right">
                                    <div class="top-login-cart">
                                        <ul id="nav-header">
                                            <li class="hidden-xs">
                                                <a href="user_loginUI.html">登陆/注册</a>
                                            </li>
                                            <li class="hidden-xs welcome">
                                                <a href="#" class="user"></a>
                                            </li>
                                            <li class="welcome">
                                                <a href="javascript:void(0);" class="log-out">退出登录</a>
                                            </li>
                                            <li class="cart">
                                                <a href="javascript:void(0);" class="to-cart">
                                                    <img src="img/icon/cart.png" alt="">购物车 (
                                                    <span id="product_count"></span>&nbsp;)
                                                </a>
                                                <ul class="submenu-mainmenu mycart" style="display: none">
                                                    <li id="check-box">
                                                        <span class="sub-total-cart text-center" style="display: inline-block;">
                                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                                &nbsp;&nbsp;小计&nbsp;&nbsp;&nbsp;
                                                            <span id="amount">￥620</span>
                                                            <a href="javascript:void(0);" class="view-cart active"></a>
                                                            <a href="javascript:void(0);" class="view-cart"></a>
                                                        </span>
                                                    </li>
                                                </ul>
                                                <ul class="submenu-mainmenu" style="text-align: center">
                                                    <li>
                                                        <span style="color: orange">登录后可查看购物车</span>
                                                        <a href="user_loginUI.html">点此登录</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="search-box">
                                        <form>
                                            <input type="text" placeholder="输入关键字查找" style="padding-bottom: 0px;">
                                            <button type="button" class="search-pro"><i class="fa fa-search"></i></button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-9 col-md-8">
                                <div class="mainmenu-area">
                                    <nav>
                                        <div class="mainmenu">
                                            <ul>
                                                <li><a href="user_index.html">主页</a></li>
                                                <li><a href="user_shop.html">商店</a></li>
                                                <li><a href="user_product_details.html">商品详情</a></li>
                                            </ul>
                                        </div>
                                    </nav>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-4">
                                <div class="account-usd">
                                    <ul>
                                        <li class="language"><a href="javascript:void(0);">我的账户<i class="fa fa-angle-down"></i></a>
                                            <ul class="submenu-mainmenu">
                                                <li><a href="javascript:void(0);" class="my-order"><i class="fa fa-circle"></i>我的订单</a></li>
                                                <li><a href="javascript:void(0);" class="my-like"><i class="fa fa-circle"></i>我的收藏</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Mobile Menu Area start -->
            <div class="mobile-menu-area">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12">
                            <div class="mobile-menu">
                                <nav id="dropdown">
                                    <ul>
                                        <li><a href="user_index.html">主页</a></li>
                                        <li><a href="user_shop.html">商店</a></li>
                                        <li><a href="user_product_details.html">商品详情</a></li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Mobile Menu Area end -->
            <!--</header>-->
        </header>
        <!-- header end -->
        <!-- banner start -->
        <div class="shop-banner-area shop-list text-center">
            <div class="about-banner-text">
                <div class="banner-title">
                    <h2>商产品展示</h2>
                </div>
                <div class="breadcrumbs">
                    <ul>
                        <li class="home"><a href="../index.html">首页</a><span> > </span></li>
                        <li>商品详情</li>
                    </ul>
                </div>
            </div>    
        </div>
        <!-- banner end -->
        <!--Start Product Details area  -->
        <section class="product-detail-area">
            <div class="container">
                <div class="row">
                    <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12">
                        <div class="product-img-tab clearfix">
                           <div class="product-main-img tab-content">
                               <div id="one" role="tabpanel"  class="p-tab-img active">
                                   <img id="zoom_01" src="img/shop/big1.jpg" alt="">
                               </div>
                           </div>
                        </div>
                    </div>
                    <div class="col-lg-7 col-md-7 col-sm-12 col-xs-12">
                        <div class="product-detail">
                            <div class="product-title">
                                <h2>Cetria postma </h2><br>
                                <h4>￥110.00</h4>
                            </div>
                            <h5>库存: <span class="remain"> In Stock</span> </h5>
                            <div>

                            </div>
                            <div class="size-quantity clearfix">
                                <div class="single-size-quantity">
                                    <h4>尺寸:</h4>
                                    <div class="search-cat">
                                        <select name="category" class="category-items">
                                            <option>选择尺寸</option>
                                            <option>XS</option>
                                            <option>S</option>
                                            <option>M</option>
                                            <option>L</option>
                                            <option>XL</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="single-size-quantity">   
                                    <h4>数量:</h4>
                                    <div class="search-cat">
                                        <select name="category" class="category-items pro-quantity">
                                            <option>01</option>
                                            <option>02</option>
                                            <option>03</option>
                                            <option>04</option>
                                            <option>05</option>
                                            <option>06</option>
                                            <option>07</option>
                                            <option>08</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-7 col-md-7 col-sm-12 col-xs-12">
                        <div class="wish-icon-product-details text-left">
                            <ul>
                                <input type="hidden" class="pid">
                                <li><a href="javascript:void(0);" data-toggle="tooltip" title="shopping cart" class="add-to-cart"><i class="fa fa-shopping-cart"></i></a></li>
                                <li><a href="javascript:void(0);" data-toggle="tooltip" title="Like it!" class="add-to-like"><i class="fa fa-heart"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12">
                        <div class="product-description-tab">
                            <div class="description-tab-menu">
                                <ul class="clearfix" role="tablist">
                                    <li role="presentation" class="active"><a href="#description" aria-controls="description" role="tab" data-toggle="tab">描述</a></li>
                                    <li role="presentation"><a href="#review" aria-controls="review" role="tab" data-toggle="tab" class="comments">评论</a></li>
                                </ul>
                            </div>
                            <div class="tab-content">
                                <div role="tabpanel" class="tab-pane active" id="description">
                                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla patur. Excepteur sint occaecat cupidatat non proident reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat</p>
                                   
                                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse</p>
                                </div>
                                <div role="tabpanel" class="tab-pane" id="review">
                                    <div class="body">
                                        <div id="div1">

                                        </div>
                                    </div>
                                    <div style="height: 50px;margin-bottom: 15px" class="btn-release">
                                        <button type="button" class="btn btn-success release" style="float: right;margin: 20px 0">发布</button>
                                    </div>
                                    <ul>
                                        <!--<li>-->
                                            <!--<p class="user">-->
                                                <!--<i class="fa fa-circle"></i>-->
                                                <!--<span class="name">user </span>-->
                                                <!--<span class="time">2019年12月25日 14:24:50</span>-->
                                            <!--</p>-->
                                            <!--<p>我觉得这件商品很不错</p>-->
                                        <!--</li>-->
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>  
            </div>
        </section>
        <!--End Product Details area  -->
        <!--Related Product Start -->
        <div class="related-prouct-area home-two">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="section-title">
                            <h4>相关商品</h4>
                        </div>
                    </div>
                </div>
                <div class="tab-content row">       
                    <div class="related-product-wrapper">
                        <div class="col-xs-12 col-width">
                            <div class="single-product">
                                <div class="single-product-item">
                                    <div class="single-product-img clearfix hover-effect">
                                        <a href="#">
                                            <img class="primary-image" src="img/product/1.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="single-product-info clearfix">
                                        <div class="pro-price">
                                            <span class="new_price">￥150</span>
                                        </div> 
                                        <h3><a href="#">Electria Ostma</a></h3>  
                                    </div>
                                    <div class="wish-icon-hover text-center">
                                        <ul>
                                            <li><a href="#" data-toggle="tooltip" title="Shopping Cart"><i class="fa fa-shopping-cart"></i></a></li>
                                            <li><a class="modal-view" href="#" data-toggle="modal" data-target="#productModal"><i class="fa fa-eye"></i></a></li>
                                            <li><a href="#" data-toggle="tooltip" title="Like it!"><i class="fa fa-heart"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-width">  
                            <div class="single-product">
                                <div class="single-product-item">
                                    <div class="single-product-img clearfix hover-effect">
                                        <a href="#">
                                            <img class="primary-image" src="img/product/2.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="single-product-info clearfix">
                                        <div class="pro-price">
                                            <span class="new_price">￥130</span>

                                        </div> 
                                        <h3><a href="#">Tletria postma</a></h3>  
                                    </div> 
                                    <div class="wish-icon-hover text-center">
                                        <ul>
                                            <li><a href="#" data-toggle="tooltip" title="Shopping Cart"><i class="fa fa-shopping-cart"></i></a></li>
                                            <li><a class="modal-view" href="#" data-toggle="modal" data-target="#productModal"><i class="fa fa-eye"></i></a></li>
                                            <li><a href="#" data-toggle="tooltip" title="Like it!"><i class="fa fa-heart"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-width">  
                            <div class="single-product">
                                <div class="single-product-item">
                                    <div class="single-product-img clearfix hover-effect">
                                        <a href="#">
                                            <img class="primary-image" src="img/product/3.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="single-product-info clearfix">
                                        <div class="pro-price">
                                            <span class="new_price">￥120</span>
                                        </div> 
                                        <h3><a href="#">Celletria ostma</a></h3>
                                    </div>
                                    <div class="wish-icon-hover text-center">
                                        <ul>
                                            <li><a href="#" data-toggle="tooltip" title="Shopping Cart"><i class="fa fa-shopping-cart"></i></a></li>
                                            <li><a class="modal-view" href="#" data-toggle="modal" data-target="#productModal"><i class="fa fa-eye"></i></a></li>
                                            <li><a href="#" data-toggle="tooltip" title="Like it!"><i class="fa fa-heart"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-width">  
                            <div class="single-product">
                                <div class="single-product-item">
                                    <div class="single-product-img clearfix hover-effect">
                                        <a href="#">
                                            <img class="primary-image" src="img/product/4.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="single-product-info clearfix">
                                        <div class="pro-price">
                                            <span class="new_price">￥150</span>
                                        </div>  
                                        <h3><a href="#">Eletria ostma</a></h3>
                                    </div>
                                    <div class="wish-icon-hover text-center">
                                        <ul>
                                            <li><a href="#" data-toggle="tooltip" title="Shopping Cart"><i class="fa fa-shopping-cart"></i></a></li>
                                            <li><a class="modal-view" href="#" data-toggle="modal" data-target="#productModal"><i class="fa fa-eye"></i></a></li>
                                            <li><a href="#" data-toggle="tooltip" title="Like it!"><i class="fa fa-heart"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-width">  
                            <div class="single-product">
                                <div class="single-product-item">
                                    <div class="single-product-img clearfix hover-effect">
                                        <a href="#">
                                            <img class="primary-image" src="img/product/5.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="single-product-info clearfix">
                                        <div class="pro-price">
                                            <span class="new_price">￥100</span>
                                        </div>  
                                        <h3><a href="#">Mortria ostma</a></h3>
                                    </div>
                                    <div class="wish-icon-hover text-center">
                                        <ul>
                                            <li><a href="#" data-toggle="tooltip" title="Shopping Cart"><i class="fa fa-shopping-cart"></i></a></li>
                                            <li><a class="modal-view" href="#" data-toggle="modal" data-target="#productModal"><i class="fa fa-eye"></i></a></li>
                                            <li><a href="#" data-toggle="tooltip" title="Like it!"><i class="fa fa-heart"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-width">  
                            <div class="single-product">
                                <div class="single-product-item">
                                    <div class="single-product-img clearfix hover-effect">
                                        <a href="#">
                                            <img class="primary-image" src="img/product/1.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="single-product-info clearfix">
                                        <div class="pro-price">
                                            <span class="new_price">￥120</span>
                                            
                                        </div>      
                                        <h3><a href="#">Celletria ostma</a></h3>
                                    </div>
                                    <div class="wish-icon-hover text-center">
                                        <ul>
                                            <li><a href="#" data-toggle="tooltip" title="Shopping Cart"><i class="fa fa-shopping-cart"></i></a></li>
                                            <li><a class="modal-view" href="#" data-toggle="modal" data-target="#productModal"><i class="fa fa-eye"></i></a></li>
                                            
                                            <li><a href="#" data-toggle="tooltip" title="Like it!"><i class="fa fa-heart"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-width">  
                            <div class="single-product">
                                <div class="single-product-item">
                                    <div class="single-product-img clearfix hover-effect">
                                        <a href="#">
                                            <img class="primary-image" src="img/product/2.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="single-product-info clearfix">
                                        <div class="pro-price">
                                            <span class="new_price">￥150</span>
                                            
                                        </div>     
                                        <h3><a href="#">Eletria ostma</a></h3>
                                    </div>
                                    <div class="wish-icon-hover text-center">
                                        <ul>
                                            <li><a href="#" data-toggle="tooltip" title="Shopping Cart"><i class="fa fa-shopping-cart"></i></a></li>
                                            <li><a class="modal-view" href="#" data-toggle="modal" data-target="#productModal"><i class="fa fa-eye"></i></a></li>
                                            <li><a href="#" data-toggle="tooltip" title="Like it!"><i class="fa fa-heart"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-width">  
                            <div class="single-product">
                                <div class="single-product-item">
                                    <div class="single-product-img clearfix hover-effect">
                                        <a href="#">
                                            <img class="primary-image" src="img/product/3.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="single-product-info clearfix">
                                        <div class="pro-price">
                                            <span class="new_price">￥100</span>
                                        </div>       
                                        <h3><a href="#">Mortria ostma</a></h3>
                                    </div>
                                    <div class="wish-icon-hover text-center">
                                        <ul>
                                            <li><a href="#" data-toggle="tooltip" title="Shopping Cart"><i class="fa fa-shopping-cart"></i></a></li>
                                            <li><a class="modal-view" href="#" data-toggle="modal" data-target="#productModal"><i class="fa fa-eye"></i></a></li>
                                            
                                            <li><a href="#" data-toggle="tooltip" title="Like it!"><i class="fa fa-heart"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--Related Product End -->
        <!-- client start -->
        <div class="client-area clearfix home-two">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="section-title">
                            <h4>我们的品牌</h4>
                        </div>
                    </div>
                </div>    
                <div class="row">
                    <div class="client-owl">
                        <div class="col-md-12">
                            <div class="single-client">
                                <a href="#"><img src="img/client/1.png" alt=""></a>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="single-client">
                                <a href="#"><img src="img/client/1.png" alt=""></a>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="single-client">
                                <a href="#"><img src="img/client/1.png" alt=""></a>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="single-client">
                                <a href="#"><img src="img/client/1.png" alt=""></a>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="single-client">
                                <a href="#"><img src="img/client/1.png" alt=""></a>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="single-client">
                                <a href="#"><img src="img/client/1.png" alt=""></a>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="single-client">
                                <a href="#"><img src="img/client/1.png" alt=""></a>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="single-client">
                                <a href="#"><img src="img/client/1.png" alt=""></a>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="single-client">
                                <a href="#"><img src="img/client/1.png" alt=""></a>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="single-client">
                                <a href="#"><img src="img/client/1.png" alt=""></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- client end -->
        <!-- footer start -->
        <footer class="footer-area">
            <!--<footer class="footer-area">-->
            <div class="footer-top-area">
                <div class="container">
                    <div class="row">
                        <div class="col-md-3 col-sm-4 col-xs-12">
                            <div class="footer-logo text-center">
                                <a href="user_index.html"><img src="img/logo/footer-logo.png" alt="Jhilmil"></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer-middle-area">
                <div class="container">
                    <div class="row">
                        <div class="col-md-4 col-sm-6">
                            <div class="footer-widget">
                                <h5>联系方式</h5>
                                <div class="single-footer-contact">
                                    <div class="footer-icon">
                                        <img src="img/cart/1.png" alt="">
                                    </div>
                                    <div class="footer-contact-info">
                                        <p>8901 Marmora Raod, </p>
                                        <p>Glasgow, D04  89GR</p>
                                    </div>
                                </div>
                                <div class="single-footer-contact">
                                    <div class="footer-icon">
                                        <img src="img/cart/2.png" alt="">
                                    </div>
                                    <div class="footer-contact-info">
                                        <p>电话 : (801) 4256  9856</p>
                                        <p>电话 : (801) 4256  9658</p>
                                    </div>
                                </div>
                                <div class="single-footer-contact">
                                    <div class="footer-icon">
                                        <img src="img/cart/3.png" alt="">
                                    </div>
                                    <div class="footer-contact-info">
                                        <p>电子邮件 : <a href="#">admin@devitems.com</a></p>
                                        <p>网址 : <a href="http://devitems.com/">www.devitems.com</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-3">
                            <div class="footer-widget">
                                <h5>Company</h5>
                                <ul>
                                    <li><i class="fa fa-circle"></i><a href="user_index.html">主页</a></li>
                                    <li><i class="fa fa-circle"></i><a href="#">关于我们</a></li>
                                    <li><i class="fa fa-circle"></i><a href="#">联系我们</a></li>
                                    <li><i class="fa fa-circle"></i><a href="#">支持中心</a></li>
                                    <li><i class="fa fa-circle"></i><a href="#">隐私政策</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-3 hidden-sm">
                            <div class="footer-widget">
                                <h5>支持</h5>
                                <ul>
                                    <li><i class="fa fa-circle"></i><a href="#">配送信息</a></li>
                                    <li><i class="fa fa-circle"></i><a href="#">订单跟踪</a></li>
                                    <li><i class="fa fa-circle"></i><a href="#">退货</a></li>
                                    <li><i class="fa fa-circle"></i><a href="#">礼物卡</a></li>
                                    <li><i class="fa fa-circle"></i><a href="#">送货上门</a></li>
                                    <li><i class="fa fa-circle"></i><a href="#">在线支持</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-2 col-sm-3">
                            <div class="footer-widget">
                                <h5>信息</h5>
                                <ul>
                                    <li><i class="fa fa-circle"></i><a href="#">付款方式</a></li>
                                    <li><i class="fa fa-circle"></i><a href="#">运输</a></li>
                                    <li><i class="fa fa-circle"></i><a href="#">查看</a></li>
                                    <li><i class="fa fa-circle"></i><a href="#">折扣</a></li>
                                    <li><i class="fa fa-circle"></i><a href="#">网站地图</a></li>
                                    <li><i class="fa fa-circle"></i><a href="#">服务</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer-bottom-area">
                <div class="container">
                    <div class="row">
                        <div class="col-md-4 col-sm-6">
                            <div class="copyright">
                                <p>Copyright &copy; 2019.Company name All rights reserved</p>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6">
                            <div class="footer-menu text-center">
                                <nav>
                                    <ul>
                                        <li><a href="#">网站地图</a></li>
                                        <li><a href="#">联系我们</a></li>
                                        <li><a href="#">愿望清单</a></li>
                                        <li><a href="#">通讯</a></li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                        <div class="col-md-4 hidden-sm">
                            <div class="payment text-right">
                                <img src="img/payment/1.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--</footer>-->
        </footer>
        <!-- footer end -->

        <!-- QUICKVIEW PRODUCT -->
        <div id="quickview-wrapper">
            <!--<div id="quickview-wrapper">-->
            <!-- Modal -->
            <div class="modal fade" id="productModal" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        </div>
                        <div class="modal-body">
                            <div class="modal-product">
                                <div class="product-images">
                                    <div class="main-image images">
                                        <img alt="" src="img/product/static2.jpg">
                                    </div>
                                </div><!-- .product-images -->

                                <div class="product-info">
                                    <h1>Diam quis cursus</h1>
                                    <div class="price-box">
                                        <p class="price">
                                            <span class="special-price">
                                                <span class="amount">￥132.00</span>
                                            </span>
                                        </p>
                                    </div>
                                    <div class="product-detail">
                                        <h5>库存: <span class="remain"> In Stock</span> </h5>
                                        <h5>月销量：<span class="sales"> 10000 </span></h5>
                                    </div>
                                    <a href="user_shop.html" class="see-all">查看所有商品</a>
                                    <div class="quick-add-to-cart">
                                        <form method="post" class="cart">
                                            <div class="numbers-row">
                                                <div><a href="javascript:void(0);" class="btn btn-rounded btn-info reduce">-</a></div>
                                                <input type="hidden" name="productId" id="pid" value=""/>
                                                <input type="number" id="french-hens" class="count" value="1" onKeypress="return (/[\d.]/.test(String.fromCharCode(event.keyCode)))"/>
                                                <div><a href="javascript:void(0);" class="btn btn-rounded btn-info add">+</a></div>
                                            </div>
                                            <button class="single-add-to-cart-button" type="submit">添加到购物车</button>
                                        </form>
                                    </div>
                                    <div class="quick-desc">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla augue nec est tristique auctor. Donec non est at libero vulputate rutrum.
                                    </div>
                                </div><!-- .product-info -->
                            </div><!-- .modal-product -->
                        </div><!-- .modal-body -->
                    </div><!-- .modal-content -->
                </div><!-- .modal-dialog -->
            </div>
            <!-- END Modal -->
            <!--</div>-->
        </div>
        <!-- END QUICKVIEW PRODUCT -->


		<!-- jquery
		============================================ -->
        <script src="js/vendor/jquery-1.11.3.min.js"></script>
		<!-- bootstrap JS
		============================================ -->		
        <script src="js/bootstrap.min.js"></script>
		<!-- meanmenu JS
		============================================ -->		
        <script src="js/jquery.meanmenu.js"></script>
		<!-- wow JS
		============================================ -->		
        <script src="js/wow.min.js"></script>
		<!-- owl.carousel JS
		============================================ -->		
        <script src="js/owl.carousel.min.js"></script>
		<!-- countdown JS
		============================================ -->		
        <script src="js/jquery.countdown.min.js"></script>
		<!-- price-slider JS
		============================================ -->		
        <script src="js/jquery-price-slider.js"></script>
		<!-- scrollUp JS
		============================================ -->		
        <script src="js/jquery.scrollUp.min.js"></script>
		<!-- plugins JS
		============================================ -->	
        <script src="js/plugins.js"></script>
   		<!-- Nevo Slider js
		============================================ -->         
		<script type="text/javascript" src="lib/custom-slider/js/jquery.nivo.slider.js"></script>
        <script type="text/javascript" src="lib/custom-slider/home.js"></script>
        <!--富文本编辑器-->
        <script type="text/javascript" src="wangEditor-3.1.1/release/wangEditor.js"></script>
		<!-- main JS
		============================================ -->		
        <script src="js/main.js"></script>
        <script src="js/myfun.js"></script>
        <script src="js/details.js"></script>
        <script>

            //跳转到购物车
            $(function () {
                $("a.to-cart").click(function () {
                    $.ajax({
                        url: url + "cart/cartUI",
                        type: "POST",
                        success: function (data) {
                            if (data["code"] == 200){
                                window.location.href=url + "user/" + data["data"]+".html";
                            }
                        }
                    });
                });

                $("a.to-cart").hover(function () {
                    $(".header-area .top-right .cart .mycart .single-cart-item").remove();
                    $.ajax({
                        url: url + "cart/getCartList",
                        type: "POST",
                        data: {userName:getCookie("USER_NAME")},
                        success: function (data) {
                            if (data["code"] == 200){
                                var datum = data["data"];
                                var sum = 0;
                                for (let i = 0; i < datum.length; i++) {
                                    var product = datum[i]["product"];
                                    $(".header-area .top-right .cart .mycart #check-box").before(
                                        "<li class=\"single-cart-item clearfix\">\n" +
                                        "    <span class=\"cart-img\">\n" +
                                        "        <a href=\"javascript:void(0);\" class='show-info' data-target='" + product["productId"] + "'><img src=\"" + product["productPicture"] + "\" alt=\"\" width=\"50\"></a>\n" +
                                        "    </span>\n" +
                                        "    <span class=\"cart-info\">\n" +
                                        "        <a href=\"javascript:void(0);\" class='show-info' data-target='\" + product[\"productId\"] + \"'>" + product["productName"] + "</a>\n" +
                                        "        <span>￥<span>" + product["productPrice"] + "</span> x <span>" + datum[i]["carCount"] + "</span></span>\n" +
                                        "    </span>\n" +
                                        "</li>"
                                    );

                                    sum += product["productPrice"] * datum[i]["carCount"];
                                }
                                $(".cart #product_count").html(datum.length);
                                $(".cart #amount").html("￥" + sum.toFixed(2));
                            }
                        }
                    });
                });
            });

            //登录成功显示姓名和购物车，否则不显示
            $(function () {
                var username = getCookie("USER_NAME");
                if (username != null && username != '') {
                    let $nav = $("#nav-header");
                    $nav.find("li").removeClass("welcome");
                    $nav.find(".hidden-xs").first().attr("class", "hidden-xs welcome");
                    $nav.find(".user").html("欢迎 ：<a href='#'>" + username + "</a>!");
                    let cart_li = $nav.find(".cart");
                    cart_li.find(".mycart").css("display", "block");
                    cart_li.find("ul").last().css("display", "none");
                }
            });

            $("a[title='Shopping Cart']").each(function () {
                $(this).attr("href","javascript:void(0);")
            });
            //添加到购物车
            $("a[title='Shopping Cart']").click(function () {
                var id = $(this).parent().next().find("a");
                $.ajax({
                    url: url + "cart/addCart",
                    type: "POST",
                    data: {
                        userName: getCookie("USER_NAME"),
                        productId: id.attr("title")
                    },
                    success: function (data) {
                        if (data["code"] == 200) {
                            alert("添加成功")
                        }else if(data["code"] == 405){
                            window.location.href=url + "user/user_loginUI.html";
                        }
                    }
                });
            });

            $("a[title='Like it!']").each(function () {
                $(this).attr("href","javascript:void(0);")
            });
            //添加到收藏
            $("a[title='Like it!']").click(function () {
                var id = $(this).parent().prev().find("a");
                $.ajax({
                    url: url + "collection/addCollection",
                    type: "POST",
                    data: {
                        userName: getCookie("USER_NAME"),
                        productId: id.attr("title")
                    },
                    success: function (data) {
                        if (data["code"] == 200) {
                            alert("添加成功！")
                        }else if(data["code"] == 405){
                            window.location.href=url + "user/user_loginUI.html";
                        }else if (data["code"] == 205) {
                            alert(data["data"]);
                        }
                    }
                });

            });

            //富文本编辑器
            window.onload=function () {
                var E = window.wangEditor;
                var editor = new E('#div1');
                editor.create()
            };

            //发布评论
            $(".product-detail-area #review .btn-release .release").click(function () {
                var productId = $(".product-detail-area input.pid").val();
                var userName = getCookie("USER_NAME");
                var comments = $(this).parent().prev().find("#div1").find(".w-e-text").html();

                $.ajax({
                    url: url + "comments/releaseComments",
                    type: "POST",
                    data: {
                        productId:productId,
                        userName: userName,
                        comments: comments,
                    },
                    success: function (data) {
                        if (data["code"] == 200) {
                            var $ul = $(".product-detail-area .product-description-tab #review ul");
                            var datum = data["data"];
                            var user = datum["user"];
                            $ul.append(
                                "<li>\n" +
                                "    <p class=\"user\">\n" +
                                "        <i class=\"fa fa-circle\"></i>\n" +
                                "        <span class=\"name\">" + user["userName"] + "</span>\n" +
                                "        <span class=\"time\">" + datum["commentsTime"] + "</span>\n" +
                                "    </p>\n" +
                                "    <p>" + datum["commentsContent"] +
                                "    </p>" +
                                "</li>"
                            );
                            $(this).parent().prev().find("#div1").find(".w-e-text").html("");
                            alert("评论成功");
                        }else if (data["code"] == 405){
                            window.location.href=url + "user/user_loginUI.html";
                        }
                    }
                })
            });

        </script>
    </body>
</html>

